<!--
 * @Descripttion: 
 * @version: 
 * @Author: kk
 * @Date: 2020-10-24 10:51:20
 * @LastEditors: kk
 * @LastEditTime: 2020-10-27 10:22:25
-->
<template>
  <div class="m-content">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">未支付订单</el-menu-item>
        <el-submenu index="3">
          <template slot="title">个人中心</template>
          <el-menu-item index="3-1" v-if="!hasLogin">登陆</el-menu-item>
          <el-menu-item index="3-2" v-if="!hasLogin">注册</el-menu-item>
          <el-menu-item index="3-3" v-if="hasLogin">退出</el-menu-item>
        </el-submenu>
        <el-menu-item index="4">订单</el-menu-item>
      </el-menu>
      <div><h3>您好！{{user.userName}}</h3></div>
  </div>
</template>
<script>
export default {
  name: "Header",
  data() {
    return {
      activeIndex: "1",
      hasLogin: false,
      user: {
        userName: "请先登录",
        avatar: "https://source.unsplash.com/random",
      },
      blogs: {},
      currentPage: 1,
      total: 0,
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log( keyPath);
      if(key==1){
        this.$router.push('/')
        this.activeIndex="1"
      }
      if(key==2){
        this.$router.push('unorder')
        this.activeIndex="2"
      }
      if(key==4){
        this.$router.push('order')
        this.activeIndex="4"
      }
      if(keyPath[1]=="3-1"){
          //登陆
          this.$router.push('/login')
      }else if(keyPath[1]=="3-2"){
          //注册
          this.$router.push('/login')
      }else if(keyPath[1]=="3-3"){
          //退出
          this.logout();
      }
    },

    logout() {
      const _this = this;
      this.$axios
        .post("http://localhost:7004/user/logout", {
          headers: {
            Authentication: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          _this.$store.commit("REMOVE_INFO");
          _this.$router.push("/login");
        });
    },
  },
  created() {
    if (this.$store.getters.getUser.userName) {
      this.user.userName = this.$store.getters.getUser.userName;
      this.user.avatar = "https://source.unsplash.com/random";
      this.hasLogin = true;
    }
  },
};
</script>

<style scoped>
.m-content {
  max-width: 960px;
  /* margin: 0 auto; */
  text-align: center;
}

.maction {
  margin: 10px 0;
}
.right-content {
  text-align: right;
}
</style>